<template>
<div id="home">
  <navBar class="home-bgc"><div slot="navbar-center">购物街</div></navBar>

  <listTabbar
    v-show="listBarIsFixed"
    class="listBar1"
    :class="{isFixed: listBarIsFixed}"
    ref="listBar1"
    :listTabbar="listTabbar"
    flag
    @getProductList="getProductList"/>

  <BScroll
      ref="bscroll"
      @getPosition="getPosition"
      :probe-type=3
      pullUpLoad
      @loadMore="loadMore"
      >
    <home-swiper ref="sppp" :banner="banner"></home-swiper>
    <recommendList :recommendList="recommendList" />
    <featureView />
    <!-- 流行 新款  精选  -->
    <listTabbar id="listTabbar" v-show="!listBarIsFixed" ref="listBar2"
    :listTabbar="listTabbar"  @getProductList="getProductList"/>

    <homeProductList :productList="productList"/>
  </BScroll>
  <!-- 如果给组件添加点击事件的话，则需要加上.native -->
  <backTop ref="backtop" v-show="isShowBackTop"  @click.native="goTop(0,0,500)"/>

</div>
</template>

<script>
import navBar from 'components/common/navBar/navBar'
// 轮播组件
import homeSwiper from './childComponents/home-swiper'
// 推荐列表组件
import recommendList from './childComponents/home-recommend'
// 获取 本周流行那张图片组件
import featureView from './childComponents/home-featureView'
// 获取listTabbar组件
import listTabbar from 'components/content/listTabbar/listTabbar'
// 获取详情组件
import homeProductList from 'components/content/productList/home-product-list'
// 引入better-scroll组件
import BScroll from 'components/common/bscroll/BScroll'
// 引入回到顶部的组件
import backTop from 'components/content/backTop/backTop'
// 获取ajax请求
import { getHomeMultiData, getHomeData } from 'api/home'
export default {
  name: 'Home',
  data () {
    return {
      banner: [],
      recommendList: [],
      listTabbar: ['流行', '新款', '精选'],
      // 流行 新款  精选的数据   这样形式的数据结构
      goods: {
        'pop': { page: 0, list: [] },
        'new': { page: 0, list: [] },
        'sell': { page: 0, list: [] }
      },
      productList: [],
      isShowBackTop: false,
      currentType: 'pop', // 定义一个当前所在的那个标签的值。用来区分标签，主要是用做上拉加载更多。
      listBarOffetTop: 0, // 定义第二个listBar的offsetTop
      listBarIsFixed: false, // 定义是否显示第一个listBar
      savePosition: 0,
      positionaa: 0
    }
  },
  created () {

  },
  mounted () {
    this.getHomeMulti()
    this.getHomeData('pop')
    this.getHomeData('new')
    this.getHomeData('sell')
  },
  methods: {
    // 获取banner 和 推荐的数据
    async getHomeMulti () {
      const { data } = await getHomeMultiData()
      this.banner = data.banner.list
      this.recommendList = data.recommend.list
    },

    // 获取流行 新款  精选的数据
    async getHomeData (type) {
      let pages = this.goods[type].page += 1
      const { data } = await getHomeData(type, pages)
      const { list } = data
      this.goods[type].list.push(...list)

      // 将初始数据置为流行
      this.productList = this.goods[this.currentType].list
      this.$nextTick(() => {
        this.$refs.bscroll.bscroll.refresh()
      })
      return list
    },
    async getProductList (index, flag) {
      this.$refs.listBar1.currentIndex = index
      this.$refs.listBar2.currentIndex = index
      switch (index) {
        case 0:
          this.currentType = 'pop'
          this.productList = this.goods['pop']['list']
          break
        case 1:
          // this.productList = await this.getHomeData('new')
          this.currentType = 'new'
          this.productList = this.goods['new']['list']
          break
        case 2:
          this.currentType = 'sell'
          // this.productList = await this.getHomeData('sell')
          this.productList = this.goods['sell']['list']
          break
      }
      this.$nextTick(() => {
        this.$refs.bscroll.bscroll.refresh()
      })

      // 如果是点击的上面的ListBar组件的话， 就要让其滚动到最顶部。
      if (flag) {
        // 进入此判断则点击的是第一个。
        this.goTop(0, -this.listBarOffetTop + 30, 500)
      }
    },
    goTop (x, y, time = 500) {
      this.$refs.bscroll.goTop(x, y, time)
    },
    // 得到position固定第二个 最上面隐藏的listbar
    getPosition (position) {
      // 元素被数据渲染完毕，dom元素是新的dom。
      this.$nextTick(function () {
        // 这里listTabbar是吸顶元素的ID
        let headerIndo = document.getElementById('listTabbar')
        // 这里要得到top的距离和元素自身的高度
        if (headerIndo && headerIndo.offsetTop !== 0) {
          this.listBarOffetTop = headerIndo.offsetTop
        }

        // this.savePosition = position
        this.positionaa = -position
        if (-position >= this.listBarOffetTop) {
          this.listBarIsFixed = true
        } else {
          this.listBarIsFixed = false
        }
        if (-position > 1000) {
          this.isShowBackTop = true
        } else {
          this.isShowBackTop = false
        }
      })
    },
    async loadMore () {
      await this.getHomeData(this.currentType)
      this.$refs.bscroll.finishPullUp() // 结束此次上拉加载更多，为了下次下拉加载更多。
      this.$refs.bscroll.refresh()
      this.$refs.bscroll.isPullUpLoad = false
    }
  },
  components: {
    navBar,
    homeSwiper,
    recommendList,
    featureView,
    listTabbar,
    homeProductList,
    BScroll,
    backTop
  },
  activated () {
    // 再次进入的时候 将y水平置为 this.savePosition
    this.goTop(0, this.savePosition, 500)
    this.$refs.bscroll.bscroll.refresh()
    // console.log('actived')
  },
  deactivated () {
    // 在这个生命周期钩子里存放当前的滚动的位置。
    this.$refs.bscroll.bscroll.stop()
    // console.log(this.$refs.bscroll.bscroll.y)  这里是个bug, 已经提交issue
    this.savePosition = this.$refs.bscroll.bscroll.y
    // console.log('deactived')
  }
}
</script>
<style scoped>
/* @import ''; 引入css类 */
#home {
  height: 100vh;
}
.home-bgc {
  background-color: var(--color-tint);
}
/* .listBar1 {
  margin-top: 44px;
} */
.isFixed {
  position: fixed;
  top: 44px;
  left: 0;
  right: 0;
  z-index: 11;
}
</style>
